<template>
    <div>
        <!-- 新建岗位查询活动 -->
        <el-dialog title="新建活动" :visible.sync="visible" :close-on-click-modal="false" @close="QualityDialogClose">
            <div class="dialog">
                <el-form :model="form" ref="form" :rules="rules">
                    <el-form-item label="活动名称" :label-width="formLabelWidth" prop="hd_name">
                        <el-input v-model="form.hd_name" autocomplete="off" placeholder="填写活动名称"></el-input>
                    </el-form-item>
                    <el-form-item label="活动所属项目" :label-width="formLabelWidth" prop="hd_xm">
                        <el-select v-model="form.hd_xm" placeholder="请选择">
                            <el-option label="国考" value="国考"></el-option>
                            <el-option label="省考" value="省考"></el-option>
                            <el-option label="事业单位" value="事业单位"></el-option>
                            <el-option label="三支一扶" value="三支一扶"></el-option>
                            <el-option label="特岗教师" value="特岗教师"></el-option>
                            <el-option label="教师招聘" value="教师招聘"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="活动所属地区" :label-width="formLabelWidth" prop="hd_ssdq">
                        <el-select v-model="form.hd_ssdq" placeholder="请选择">
                            <el-option label="兰州" value="兰州"></el-option>
                            <el-option label="白银" value="白银"></el-option>
                            <el-option label="天水" value="天水"></el-option>
                            <el-option label="武威" value="武威"></el-option>
                            <el-option label="张掖" value="张掖"></el-option>
                            <el-option label="平凉" value="平凉"></el-option>
                            <el-option label="酒泉" value="酒泉"></el-option>
                            <el-option label="庆阳" value="庆阳"></el-option>
                            <el-option label="定西" value="定西"></el-option>
                            <el-option label="陇南" value="陇南"></el-option>
                            <el-option label="临夏" value="临夏"></el-option>
                            <el-option label="甘南" value="甘南"></el-option>
                            <el-option label="金昌" value="金昌"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择筛选条件" :label-width="formLabelWidth" prop="hd_condition">
                        <el-checkbox-group v-model="form.hd_condition">
                            <el-checkbox label="学历" disabled></el-checkbox>
                            <el-checkbox label="专业" disabled></el-checkbox>
                            <el-checkbox label="年份"></el-checkbox>
                            <el-checkbox label="县区"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="活动失效时间" :label-width="formLabelWidth" prop="hd_yxtime">
                        <el-date-picker v-model="form.hd_yxtime" type="date" placeholder="选择日期时间"
                            value-format="yyyy/MM/dd" />
                    </el-form-item>
                    <el-form-item label="头图" :label-width="formLabelWidth" prop="hd_banner">
                        <el-input v-model="form.hd_banner" autocomplete="off" placeholder="请填写头图图片链接">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="背景图" :label-width="formLabelWidth" prop="hd_bodybg">
                        <el-input v-model="form.hd_bodybg" autocomplete="off" placeholder="请填写背景图图片链接">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="上传职位表" :label-width="formLabelWidth" prop="hd_zw">
                        <el-upload class="upload-demo" drag action="aaa" multiple accept=".xlsx, .xls"
                            :on-exceed="exceed" :limit="1" :file-list="editfile" :on-remove="remove"
                            :http-request="uploadFile">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">
                                将文件拖到此处，或
                                <em>点击上传</em>
                            </div>
                            <div class="el-upload__tip" slot="tip">只能上传1个xlsx文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="填写表头" :label-width="formLabelWidth" prop="hd_zw_thkey">
                        <el-input v-model="form.hd_zw_thkey" autocomplete="off" placeholder="按顺序填写表头字段（英文），多个字段以英文逗号隔开">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="填写分享标题" :label-width="formLabelWidth" prop="hd_share_title">
                        <el-input v-model="form.onShareApp_title" autocomplete="off" placeholder="填写分享至朋友/朋友圈标题（10字以内）">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="填写分享内容" :label-width="formLabelWidth" prop="hd_share_text">
                        <el-input v-model="form.onShareApp_text" autocomplete="off"
                            placeholder="填写分享至朋友/朋友圈文字内容说明（20字以内）">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="填写分享图片链接" :label-width="formLabelWidth" prop="hd_share_img">
                        <el-input v-model="form.onShareApp_imgUrl" autocomplete="off"
                            placeholder="填写分享的图片链接（尺寸：500*400）">
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="QualityDialogClose">取 消</el-button>
                <el-button type="primary" @click="getData('form')">确 定</el-button>
                <el-button type="primary" @click="resetForm('form')">重置</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import XLSX from 'xlsx'
import { generRandom } from '@/util/index'

export default {
    data() {
        return {
            visible: false,
            form: {
                hd_name: '',
                hd_xm: '',
                hd_ssdq: '',
                hd_yxtime: '',
                hd_zw: [],
                hd_zw_filename: '',
                hd_zw_thkey: '',
                hd_condition: ['学历', '专业'],
                hd_banner: '',
                hd_bodybg: '',
                onShareApp_title: '',
                onShareApp_text: '',
                onShareApp_imgUrl: ''
            },
            rules: {
                hd_name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' }
                ],
                hd_xm: [
                    { required: true, message: '请选择活动所属项目', trigger: 'change' }
                ],
                hd_ssdq: [
                    { required: true, message: '请选择活动所属地区', trigger: 'change' }
                ],
                hd_yxtime: [
                    { required: true, message: '请选择时间', trigger: 'change' }
                ],
                hd_zw: [
                    { required: true, message: '请上传职位表' }
                ],
                hd_condition: [
                    { required: true, message: '请选择筛选条件' }
                ],
                hd_zw_thkey: [
                    { required: true, message: '请填写职位表表头字段名（英文）', trigger: 'blur' }
                ],
                hd_banner: [
                    { required: true, message: '请填写头图图片链接', trigger: 'blur' }
                ],
                hd_bodybg: [
                    { required: true, message: '请填写背景图图片链接', trigger: 'blur' }
                ]
            },
            editfile: [],
            formLabelWidth: '140px'
        }
    },
    props: {
        QualityDialogFlag: {
            default: false
        },
        hdData: {
            default: {}
        },
        hdtype: {
            type: String
        }
    },
    methods: {
        QualityDialogClose() {
            this.$refs['form'].resetFields()
            this.$emit("update:QualityDialogFlag", false)
        },
        async uploadFile(params) {
            const _file = params.file
            const fileReader = new FileReader()
            fileReader.onload = (ev) => {
                try {
                    const data = ev.target.result
                    const workbook = XLSX.read(data, {
                        type: 'binary'
                    });
                    this.form.hd_zw_filename = _file.name
                    for (let sheet in workbook.Sheets) {
                        //循环读取每个文件
                        const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
                        //若当前sheet没有数据，则continue
                        if (sheetArray.length == 0) {
                            continue;
                        }
                        this.form.hd_zw = sheetArray
                        this.$refs.form.clearValidate('hd_zw')
                    }
                } catch (e) {
                    this.$message.warning('文件类型不正确！')
                    return
                }
            }
            fileReader.readAsBinaryString(_file)
        },
        getData(formName) {
            if (this.hdtype == 'addNewhd') {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.form.hd_id = generRandom()
                        this.form.hd_xcx_path = `/pages/gwcx/gwcx?hd_id=${this.form.hd_id}`
                        this.$http.post('/job/add', this.form).then(res => {
                            this.QualityDialogClose()
                            this.$message.success(res.data.msg)
                            this.$parent.fetch()
                            this.resetForm('form')
                            this.remove()
                        }).catch(err => {
                            console.log(err)
                        })
                    }
                });
            } else if (this.hdtype == 'edithd') {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$http.post('/job/edit', this.form).then(res => {
                            this.$message.success(res.data.msg)
                            this.QualityDialogClose()
                            this.$parent.fetch()
                            this.resetForm('form')
                            this.remove()
                        }).catch(err => {
                            console.log(err)
                        })
                    }
                });
            }
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
        exceed() {
            this.$message.error("最多只能上传1个xlsx文件")
        },
        //删除文件
        remove() {
            this.form.hd_zw = []
            this.editfile = []
            this.form.hd_zw_filename = ''
        }
    },
    watch: {
        QualityDialogFlag() {
            
            console.log(this.hdData)
            this.visible = this.QualityDialogFlag
            if (this.hdData.hasOwnProperty('hd_id')) {
                this.hdData.hd_zw_thkey = this.hdData.hd_zw_thkey.toString()
                this.editfile = []
                this.editfile.push({
                    name: this.hdData.hd_zw_filename
                })
                this.form = this.hdData
            }
        }
    }
}
</script>

<style>
</style>